<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class=" pb20 pl30" style="width: 280rpx;">
					<u-button @click="handleAdd" type="primary" plain text="新增货损信息"></u-button>
				</view>
			</template>
			
			
			<view class="p30">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="">
						提交日期:2025-08-06
					</view>
					<view class="">
						配件名称: A2不锈钢餐具底盒(纯白)
					</view>
					<view class="">
						货损数量:10
					</view>
					<view class="">
						货损原因:人为损耗
					</view>
					<view class="">
						责任人/供应商:员工姓名
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const formData = {
					search: '',
					page: pageNo,
					limit: pageSize,
				}
				
				this.$refs.paging.complete([1,2,3,4,5,6]);
				
				// this.$api.host(formData).then(res => {
				// 	//将请求的结果数组传递给z-paging
				// 	this.$refs.paging.complete(res.data);
				// }).catch(res => {
				// 	console.log(res)
				// 	//如果请求失败写this.$refs.paging.complete(false);
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			
			
			handleAdd() {
				this.ToPage('/pagesIndex/cargoDamage/add')
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	.item {
		width: 100%;
		padding: 30rpx;
		border-radius: 20rpx;
		border: 1rpx solid #C2C2C2;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		
		>view {
			margin-bottom: 20rpx;
			font-weight: bold;
		}
	}
}
</style>
